import React, { lazy, Suspense } from 'react'
// 引入组件 
import "./App.css"
// 打开 antd-mobile 的文档
// 安装：yarn add antd-mobile
// 在 App.js 根组件中导入要使用的组件
// 渲染组件
// 在 index.js 中导入组件库样式
import { BrowserRouter as Router, Route, NavLink, Link, Redirect } from 'react-router-dom'

//  引入 homeIndex 和CityList 组件 
// import Home from './pages/Home/index'
// import CityList from './pages/CityList/index'

// //  引入map组件 
// import MapIndex from './pages/Map'


// // 引入login组件 
// import LoginIndex from './pages/Login/index'



// import AuthRoute from './components/AuthRoute/index鉴权架构代码'


import AuthRoute from './components/AuthRoute/index'


//这个组件需要登录才能看到
// import    Rent from './pages/Rent/index'

const Rent = React.lazy(() => import('./pages/Rent/index'))

const Home = React.lazy(() => import('./pages/Home/index'))
const CityList = React.lazy(() => import('./pages/CityList/index'))
const MapIndex = React.lazy(() => import('./pages/Map'))
const LoginIndex = React.lazy(() => import('./pages/Login/index'))








class App extends React.Component {
    render() {
        return (
            <div className='App'>










                <Router>

                    <Suspense fallback={<div className="route-loading">loading...</div>}>

                        {/*  使用路由 */}
                        <Route path='/home' component={Home} ></Route>
                        <Route path='/citylist' component={CityList} ></Route>

                        <Route path='/map' component={MapIndex} ></Route>


                        {/*  添加login路由组件 */}
                        <Route path='/login' component={LoginIndex}></Route>




                        <Route path="/" exact render={() => <Redirect to="/home" />} />



                        {/* 配置登录后，才能访问的页面 */}
                        <AuthRoute exact path="/rent" component={Rent} title='我是登录后可以看到的rent组件' />

                        {/* <AuthRoute exact   path="/bbb"   component={Rent}  title='我是登录后可以看到的rent组件' /> */}
                        {/* <AuthRoute exact   path="/rent/aaa"   component={Rent}  title='我是登录后可以看到的rent组件' /> */}

                    </Suspense>
                </Router>


            </div>
        )
    }
}

export default App








